<template>
    <div class="app-container">
        <section>
            <div class="contentBox">
                <div class="content">
                    <el-form ref="form" :model="form" class="form">
                        <el-form-item label="富文本" style="width:100%" prop="content" :rules="[{ required: true, message: '请输入富文本', trigger: 'blur' }]">
                            <div id="edit1" ref="edit1"></div>
                        </el-form-item>
                    </el-form>
                    <div>
                        <el-button type="primary" style="width:143px" @click="save">确定</el-button>
                    </div>
                </div>
            </div>

        </section>
    </div>
</template>

<script>
import E from 'wangeditor'
export default {
    data() {
        return {
            editor1: '',
            form: {
                id: 1,
                content: '',
            },
        }
    },
    created() {
    },
    mounted() {
        this.getLicenseInfo()
    },
    methods: {
        getEdit() {
            this.editor1 = new E(this.$refs.edit1)
            this.editor1.config.onchange = (html) => {
                this.form.content = html
            }
            this.editor1.config.customUploadImg = (resultFiles, insertImgFn) => {
                let formData = new window.FormData();
                formData.append("files", resultFiles[0]);
                this.$Http.upload(formData).then((res) => {
                    if (res.status == 1) {
                        this.$message({
                            message: "上传成功",
                            type: "success",
                        });
                        insertImgFn(res.data)
                    } else {
                        this.$message(res.msg);
                    }
                });
            }
            this.editor1.config.customUploadVideo = (resultFiles, insertVideoFn) => {
                let formData = new window.FormData();
                formData.append("files", resultFiles[0]);
                this.$Http.upload(formData).then((res) => {
                    if (res.status == 1) {
                        this.$message({
                            message: "上传成功",
                            type: "success",
                        });
                        insertVideoFn(res.data)
                    } else {
                        this.$message(res.msg);
                    }
                });
            }
            this.editor1.create()
            this.editor1.txt.html(this.form.content);
        },
        async getLicenseInfo() {
            let res = await this.$Http.getContact()
            if (res.status == 1) {
                this.form = res.data
                this.getEdit()
            }
        },
        save() {
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    let res = await this.$Http.setContact(this.form)
                    if (res.status == 1) {
                        this.$message.success('保存成功')
                        localStorage.setItem('aboutId', res.data)
                    }
                } else {
                    return false;
                }
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    ::v-deep .el-form-item__label {
        float: initial;
    }
    ::v-deep .el-input.is-disabled .el-input__inner {
        color: #606266;
        background-color: transparent;
    }
    .kong {
        height: 40px;
    }
    section {
        background: #eee;
        padding: 30px;
        .contentBox {
            background: #fff;
            border-radius: 8px;
            padding: 0 24px 20px;
        }
        .content {
            height: 100%;
            padding-top: 20px;
            .title {
                height: 65px;
                font-size: 18px;
                font-family: PingFangSC, PingFangSC-Semibold;
                font-weight: 600;
                color: #383b40;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .el-icon-close {
                    cursor: pointer;
                }
            }
        }
    }
}
</style>